﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>

		<!-- CSS
		================================================== -->
		<!-- Fontawesome Icon font -->
        <link rel="stylesheet" href="../css/font-awesome.min.css">
		<!-- Twitter Bootstrap css -->
        <link rel="stylesheet" href="../css/bootstrap.min.css">
		<!-- jquery.fancybox  -->
        <link rel="stylesheet" href="../css/jquery.fancybox.css">
		<!-- animate -->
        <link rel="stylesheet" href="../css/animate.css">
		<!-- Main Stylesheet -->
        <link rel="stylesheet" href="../css/main.css">function
		<!-- media-queries -->
        <link rel="stylesheet" href="../css/media-queries.css">

		<!-- Modernizer Script for old Browsers -->
        <script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
		<section id="works" class="works clearfix">
			<div class="container">
				<div class="row">
				
					<div class="sec-title text-center">
						<h2>学习</h2>
						<div class="devider"><i class="fa fa-heart-o fa-lg"></i></div>
					</div>
					 
					<div class="sec-sub-title text-center">
						<p>只有培养了看官方文档的能力,才算真正的自主学习.</p>
					</div>
					
					<div class="work-filter wow fadeInRight animated" data-wow-duration="500ms">
						<ul class="text-center">
							<li><a href="javascript:;" data-filter="all" class="active filter">所有</a></li>
							<li><a href="javascript:;" data-filter=".study" class="filter">学习网站</a></li>
							<li><a href="javascript:;" data-filter=".document" class="filter">官方文档</a></li>
						</ul>
					</div>
					
				</div>
			</div>
			<style>
				.project-wrapper img{width:400px ;height:300px ;}
			</style>
			<div class="project-wrapper" id="wrapper">
			
				
				
			</div>

		</section>
<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279624779'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1279624779%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>
<script src="../js/jquery-1.11.1.min.js"></script>
		<!-- Single Page Nav -->
        <script src="../js/jquery.singlePageNav.min.js"></script>
		<!-- Twitter Bootstrap -->
        <script src="../js/bootstrap.min.js"></script>
		<!-- jquery.fancybox.pack -->
        <script src="../js/jquery.fancybox.pack.js"></script>
		<!-- jquery.mixitup.min -->
        <script src="../js/jquery.mixitup.min.js"></script>
		<!-- jquery.parallax -->
        <script src="../js/jquery.parallax-1.1.3.js"></script>
		<!-- jquery.countTo -->
        <script src="../js/jquery-countTo.js"></script>
		<!-- jquery.appear -->
        <script src="../js/jquery.appear.js"></script>
		<!-- Contact form validation -->
		<script src="../js/jquery.form.js"></script>
		<script src="../js/jquery.validate.min.js"></script>
		<!-- jquery easing -->
        <script src="../js/jquery.easing.min.js"></script>
		<!-- jquery easing -->
        <script src="../js/wow.min.js"></script>
		<script>
			var wow = new WOW ({
				boxClass:     'wow',      // animated element css class (default is wow)
				animateClass: 'animated', // animation css class (default is animated)
				offset:       120,          // distance to the element when triggering the animation (default is 0)
				mobile:       false,       // trigger animations on mobile devices (default is true)
				live:         true        // act on asynchronously loaded content (default is true)
			  }
			);
			wow.init();


			var  kang  = document.getElementById('wrapper');

			let html

let $name2  = [
{title:"w3c",text:"领先的 Web 技术教程 ",class:"study",href:"https://www.w3school.com.cn/index.html"},
{title:"Bootstrap",text:"简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 ",class:"document",href:"https://www.bootcss.com/"},
{title:"菜鸟教程",text:"适合初学者学习的网站 ",class:"study",href:"https://www.runoob.com/"},
{title:"廖雪峰的官方网站",text:"大牛廖雪峰开发的学习网站 ",class:"study",href:"https://www.liaoxuefeng.com/"},
{title:"three.js",text:"three.js是专门做3d的JavaScript插件",class:"document",href:"http://www.webgl3d.cn/"},
{title:"学习Web开发",text:"更为齐全的web学习网站",class:"study",href:"https://developer.mozilla.org/zh-CN/docs/learn"},
{title:"zeptojs",text:"具有与 jQuery兼容的API。 如果使用jQuery，您已经知道如何使用Zepto。",class:"document",href:"http://www.zeptojs.cn/#"},
{title:"jquery",text:"JavaScript插件 ",class:"document",href:"https://jquery.cuishifeng.cn/"},
{title:"WebGI中文网",text:"国内最好最系统的WebGI教程 ",class:"document",href:"http://www.hewebgl.com/"},
{title:"echarts",text:"百度开放的API ",class:"document",href:"https://echarts.apache.org/zh/index.html"},
{title:"Vue",text:"渐进式JavaScript 框架 ",class:"document",href:"https://doc.vue-js.com/"},
{title:"Element UI",text:"Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 ",class:"document",href:"https://element.faas.ele.me/#/zh-CN"},
{title:"Font Awesome",text:"Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 ",class:"document",href:"http://www.fontawesome.com.cn/"},


{title:"慕课网",text:"国内最知名的程序员学习网站 ",class:"study",href:"https://www.imooc.com/"},
{title:"Less",text:"css插件库,给CSS加点料。 ",class:"document",href:"https://less.bootcss.com/"},
{title:"Node.js",text:"Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。",class:"document",href:"http://nodejs.cn/"},


]
		
		for (let index = 0; index < $name2.length; index++) {

			let img = index + 1;

			const 	text 	= $name2[index].text,
			 		title 	= $name2[index].title,
			 		href 	= $name2[index].href,
			 		// img 	= $name2[index].img,
			 		$class	= $name2[index].class;

			
		html  += `<figure class="mix work-item `+$class+`" >
					<img src="img/study-img/`+(img)+`.jpg" alt="">
					<figcaption class="overlay">
						<a class="fancybox" rel="works" title="此处还没有标题" href="`+href+`" target="_blank"><i class="fa fa-eye fa-lg"></i></a>
						<h4>`+title+`</h4>
						<p>`+text+`</p>
					</figcaption>
				</figure>`
		
		}

		let html2 = html.replace("undefined","");

		wrapper.innerHTML = html2;

		</script> 
		<!-- Custom Functions -->
        <script src="../js/custom.js"></script>